<template>
    <view class="photo">
        <view class="content" v-if="!!mainInfo">
            <view class="title">识别结果：</view>
            <view class="main" v-if="!!mainInfo">
                <u-image class="img" width="100%" height="500rpx" :src="dnsName + projectName + mainInfo.baike_info.image_url"></u-image>
                <view class="info">
                    <view class="name">{{ mainInfo.name }}</view>
                    <view class="desc baseInfo">
                        <!-- {{mainInfo.baike_info.description}} -->
                        <view class="topic">基础信息：</view>
                        <view class="text">
                            {{ mainInfo.baike_info.description }}
                        </view>
                    </view>
                </view>
            </view>
            <view class="title">相关植物：</view>
            <view class="relative" v-if="relativeInfo.length > 0">
                <view class="plant" v-for="(item, index) in relativeInfo" :key="index" @click="gotoBotany(item.name)">
                    <u-image class="img" width="100%" height="300rpx" :src="dnsName + projectName + item.baike_info.image_url"></u-image>
                    <view class="name">{{ item.name }}</view>
                    <view class="desc">
                        {{item.baike_info.description}}
                    </view>
                </view>
               <!-- <view class="plant">
                    <u-image class="img" width="100%" height="300rpx" :src="relativeInfo.baike_info.image_url"></u-image>
                    <view class="name">{{ relativeInfo.name }}</view>
                    <view class="desc">
                        {{relativeInfo.baike_info.description}}
                    </view>
                </view> -->
            </view>
        </view>
        <view class="content upload" v-show="true">
            <u-upload ref="uUpload" :action="action" :max-count="1" :auto-upload="false" @on-success="success" :limitType="imgType"></u-upload>
            <u-button @click="submit">{{ infoStatus ? '重新识别' : '识别'}}</u-button>
        </view>
        <bottomTabBar></bottomTabBar>
        <!-- <view class="loading">
            <u-loading :show="isLoading" :size="70" :mode="'flower'"></u-loading>
        </view>
        <view>
            <u-toast ref="uToast" />
        </view> -->
    </view>
</template>

<script>
     import {mapState} from 'vuex';
    import bottomTabBar from '@/components/bottom-tabbar.vue';
    import {loading, successToast, clearLoad, init, dnsName, projectName} from '@/common/global.js'
    export default {
        components: {
            bottomTabBar
        },
        data() {
            return {
                action: '',
                src: '../../static/logo.png',
                mainInfo: null, // 主植物信息
                relativeInfo: null,// 相关植物信息
                infoStatus: false,
                imgType: ['png', 'jpg', 'jpeg'],
                dnsName,
                projectName
            };
        },
        computed: {
            ...mapState({
                // dnsName: state => state.dnsName,
                loginStatus: state => state.loginStatus
                // projectName: state => state.projectName,
            })
        },
        methods: {
            /**
             * 上传按钮
             * */
            submit() {
                loading('识别中...');
                this.$refs.uUpload.upload();
            },
            /**
             * 上传成功后调用
             * */
            success(data, index, lists, name) {
                clearLoad();
                uni.hideLoading();
                successToast('识别成功！');
                console.log('success', data)
                this.mainInfo = data.data.main;
                this.relativeInfo = data.data.relative;
                this.infoStatus = true;
                this.$refs.uUpload.clear();
                this.isLoading = false;
                uni.pageScrollTo({
                	scrollTop: 0,
                	duration: 100
                })
            },
            gotoBotany(name) {
                uni.navigateTo({
                    url: `/pages/search/search?plant=${name}`
                })
            }
        },
        mounted() {
            // 初始化全局函数的this
            init({_this: this});
            this.action = `${this.dnsName}${this.projectName}/upload/plant`;
        }
    }
</script>

<style lang="less">
    @bgColor: #fff;
    .photo {
        padding: 15rpx;
        
        .upload{
            background: #fff;
        }
        
        .title {
            font-size: 36rpx;
            margin: 15rpx 0;
        }
        
        .content {
            .desc {
                margin-bottom: 30rpx;
                
                .topic {
                    font-weight: bold;
                }
                
                .text {
                    text-indent: 2em;
                    text-align:justify;
                    text-justify: distribute;
                }
            }
            
            .main {
                margin-bottom: 40rpx;
                border-radius: 6rpx;
                
                .img {
                    border: 6rpx dashed #d5d5d5;
                }
                
                .desc {
                    background: @bgColor;
                    padding: 26rpx 26rpx 40rpx 26rpx;
                }
            }
            
            .name {
                font-size: 34rpx;
                font-weight: bold;
                text-align: center;
                padding: 15rpx 0 0 0;
                margin-top: 8rpx;
                background: @bgColor;
            }
            
            .relative {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                margin-bottom: 15rpx;
                
                .name {
                    font-size: 30rpx;
                    margin-bottom: 12rpx;
                }
                
                .desc {
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-line-clamp: 4;
                    -webkit-box-orient: vertical;
                    text-overflow: ellipsis;
                    text-indent: 2em;
                    text-align:justify;
                    text-justify: distribute;
                }
                
                .plant {
                    flex: 0 0 48%;
                    border: 4rpx solid #d5d5d5;
                    padding: 12rpx;
                    background: #fff;
                    border-radius: 6rpx;
                }
                
            }
        }
        .loading {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }
</style>
